<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.75">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.structure.min.css" />
    <!--<link rel="stylesheet" href="API/css/datatables/css/jquery.dataTables.css"/>--> 
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="API/js/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
    <!--<script type="text/javascript" src="API/js/highcharts.js"></script>-->
    <!--<script type="text/javascript" src="API/js/modules/exporting.js"></script>-->
    <!--<script type="text/javascript" src="API/js/jquery.dataTables.min.js"></script>--> 
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/fonctions.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>

    <script type="text/javascript">
    checkMaintenance();
    checkAuthentification();
    
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 24;

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////
    //A la construction de la page
    $(document).on('pageinit',function() {
        try {
            // Init commmun
            init_commun();

            // Init page
        }
        catch (er) {
            log(0, "ERROR(init_home):" + er.message);
        }
    });

    //Affichage de la page avant onload
    $(document).on('pageshow',function() {
        try {
            show_commun();
        }
        catch (er) {
            log(0, "ERROR(show):" + er.message);
        }
    });

    //Fin chargement page
    function OnLoad() {
        try {
            chargeCloud();
        }
        catch (er) {
            log(0, "ERROR(OnLoad):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS METIER
    //////////////////
    /**
     * Upload un fichier
     * 
     * @param {type} p_obj
     */
    function upload(p_obj) {
        try {
            $('#retour_upload').html("").trigger("create");
            
            var retour = {};
            var inputElement = $('#file_up');
            
            if(inputElement[0].files.length > 0){
                var data = new FormData();
                jQuery.each(inputElement[0].files, function(i, file) {
                    data.append('file-'+i, file);
                });

                retour = send(data);
                
                $('#retour_upload').html(iterateAttributesAndFormHTMLLabels(retour)).trigger("create");
            }
        }
        catch (er) {
            log(0, "ERROR(upload):" + er.message);
        }
    }
    
    function chargeCloud() {
        try {
            var tabInput = { };
            var retour = callBD("php/liste.php", "GET", "text", tabInput, null, false);
            try{
                var json_retour = JSON.parse(retour);
                $('#div_cloud').html(iterateAttributesAndFormHTMLLabels(json_retour)).trigger("create");
            }catch (er){
                $('#div_cloud').html(er.message).trigger("create");
            }
        }
        catch (er) {
            log(0, "ERROR(chargeCloud):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS TECHNIQUE
    ///////////////////
    function send(p_fichiers) {
        try {
            var retour = {};
            
            var ajax = $.ajax({
                url: 'php/upload.php',
                data: p_fichiers,
                cache: false,
                contentType: false,
                processData: false,
                type: 'POST',
                async:false,
                success : function(p_resultat, p_statut){
                    var json_retour = JSON.parse(p_resultat);
                    retour["appel"] = "ok";
                    retour["code"] = json_retour["code"];
                    retour["message"] = json_retour["message"];
                },
                error : function(p_resultat, p_statut, p_erreur){
                    var json_retour = JSON.parse(p_resultat);
                    retour["appel"] = "ko";
                    retour["code"] = json_retour["code"];
                    retour["message"] = json_retour["message"];
                }
            });   
            
            return retour;
        }
        catch (er) {
            log(0, "ERROR(upload):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
</script>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->

        <!-- content -->
        <div data-role="content" id="main_content">
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h3>HappyCloud</h3>
                <label for="file_ci">Votre fichier :</label>
                <input type="file" name="file_up" id="file_up" value="" data-clear-btn="true" onchange="javascript:upload(this);" />
                <div id="retour_upload"></div>
            </div>
            
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h3>Le cloud</h3>
                <div id="div_cloud"></div>
            </div>
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./page_faq.html?mili='+getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./page_sortie.html?mili='+getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>